<template>
<div ref="chart" style="height:38vh;width: 500px;"></div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts'

export default {
data() {
return {
chart:null,
data: [] // 初始化 data 变量为空数组
};
},
mounted() {
this.initChart(); // 初始化 Echarts 实例
this.fetchData();
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart);
},
fetchData() {
this.$http.get('http://localhost:8080/work/sortcount') // 发起后端请求获取查询结果
.then(response => {
  this.data = response.data; // 将返回的数据赋值给 data 变量
  this.renderChart();
})
.catch(error => {
  console.error('Error fetching data:', error);
});
},
renderChart() {
const options = {
// 在这里根据需求配置 Echarts 图表的选项
 title: {
 text: '各类别作品数量统计图',
 left: 'center'
},
tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
xAxis: {
  type: 'category',
  data: this.data.map(row => row.worksort), // 使用 this.data 进行 map 操作
  axisLabel: {
    rotate: 45 // 调整旋转角度，可以根据需要进行调整
} 
},
yAxis: {
  type: 'value'
},
series: [{
  type: 'bar',
  data: this.data.map(row => row.worksortcount) // 使用 this.data 进行 map 操作
}]
};
this.chart.setOption(options);
}
}
};
</script>

<style>
/* 在这里添加你的样式 */
</style>